<template>
  <Header></Header>
  <div class="main">
    <div class="body">
      <div class="topGoodType">
        <div class="imgBox">
          <div class="BtnBox">
            <div class="topBtn" v-show="state.topShow">
              <el-icon>
                <ArrowUpBold/>
              </el-icon>
            </div>
            <div class="bottomBtn" v-show="state.bottomShow">
              <el-icon>
                <ArrowDownBold/>
              </el-icon>
            </div>
            <div class="typeBoxList" ref="typeBoxListRef">
              <div class="scrollListBox">
                <div v-if="state.positiveVideo !== ''"
                     :class="state.typeBoxItemAction === -1 ? 'typeBoxItem_action':'typeBoxItem'"
                     class="positiveVideoClass"
                     @click="typeBoxItemActionFun(-1,'')"
                >
                  <div class="bofang"><el-icon><VideoPlay /></el-icon></div>
                  <img :src="state.goodData.productImage[0]" alt="">
                </div>
                <img :class=" index === state.typeBoxItemAction ? 'typeBoxItem_action':'typeBoxItem'"
                     v-for="(item,index) of state.goodData.productImage" :src="item" alt=""
                     @click="typeBoxItemActionFun(index,item)">
              </div>
            </div>
          </div>
          <div class="typeBoxIndex">
            <div class="bigImgBox" @mousemove="handleMouseMove" @mouseenter="handleMouseEnter"
                 @mouseleave="handleMouseLeave">
              <video v-if="state.videoShow" :src="state.positiveVideo" controls="controls"></video>
              <img v-else ref="imageRef" :src="state.positiveImg" alt="Main product image" class="main-image">
              <div v-show="showZoomedImage && !state.videoShow" class="magnifyingGlass"
                   :style="{ width: `${config.lensSize}px`, height: `${config.lensSize}px`, top: `${lensPosition.top}px`, left: `${lensPosition.left}px` }"></div>
            </div>

            <div class="BlowUpBox" v-show="showZoomedImage && !state.videoShow">
              <img :src="state.positiveImg"
                   alt="Zoomed product view"
                   class="zoomed-image"
                   :style="zoomedImageStyle">
            </div>
            <div class="LinkBox">
              <div class="title">CepиЯ oт бpенда</div>
              <horizontalRoll :scrollList="state.seriesList"></horizontalRoll>
            </div>
          </div>
        </div>
        <div class="typeBox">
          <goodType @initiateOrder="initiateOrderFun" @regressionImg="regressionImgFun" :goodData="state.goodData"></goodType>
        </div>
      </div>
      <div class="topGoodDetails">
        <el-tabs v-model="state.tabIndex" class="demo-tabs" @tab-click="tabClickFUn">
          <el-tab-pane label="Товары Подробнее" name="0">
            <div v-html="state.goodData.description"></div>
          </el-tab-pane>
          <el-tab-pane label="Оценка покупателей" name="1">
            <review></review>
          </el-tab-pane>
<!--          <el-tab-pane label="Информация о закупках" name="2"></el-tab-pane>-->
          <el-tab-pane label="Квалификационный сертификат" name="3">
            <img v-if="state.certificateList.length" v-for="(item,index) of state.certificateList" :src="item" alt="">
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <order :show="state.orderShow" :typeGoodData="state.typeGoodData" :goodData="state.goodData" @close="state.orderShow = false"></order>
  </div>
</template>

<script lang="ts" setup>
import Header from '@/components/Header/Header.vue';
import horizontalRoll from './horizontalRoll.vue'
import goodType from './goodType.vue'
import order from './order.vue'
import {ref, reactive, onMounted, onUnmounted} from 'vue'
import {ArrowDownBold, ArrowUpBold, VideoPlay} from "@element-plus/icons-vue";
import review from './review.vue'
import {getGoodsDetail, getGoodsSkuAttribute, getIndexList} from "@/api/api.ts";
import {useRoute} from 'vue-router'
const route = useRoute()
const typeBoxListRef = ref()
const state = reactive({
  topShow: false,
  bottomShow: true,
  typeBoxItemAction: -1,
  index: '0',
  goodData: {},
  positiveImg: '',
  positiveVideo: '',
  seriesList: [],
  showLens: false,
  videoShow:false,
  orderShow:false,
  typeGoodData:[],
  certificateList:[]
})
interface ImagePosition {
  top: number
  left: number
}
const imageRef = ref<HTMLImageElement | null>(null)
const showZoomedImage = ref(false) // 同时控制放大镜和放大图显示
const lensPosition = ref<ImagePosition>({top: 0, left: 0})
const zoomedImageStyle = ref({transform: 'translate(0, 0) scale(1)'})
const config = {
  lensSize: 200, // 放大镜尺寸
  zoomLevel: 2, // 放大倍数
  debounceTime: 10 // 防抖时间
}
let debounceTimer: number | null = null
const handleMouseEnter = () => {
  showZoomedImage.value = true
}
const handleMouseLeave = () => {
  showZoomedImage.value = false
}
const calculateZoom = (event: MouseEvent) => {
  if (!imageRef.value) return
  const imgRect = imageRef.value.getBoundingClientRect()
  const imgWidth = imgRect.width
  const imgHeight = imgRect.height
  const mouseX = event.clientX - imgRect.left
  const mouseY = event.clientY - imgRect.top
  const maxX = imgWidth - config.lensSize
  const maxY = imgHeight - config.lensSize
  const lensX = Math.min(Math.max(mouseX - config.lensSize / 2, 0), maxX)
  const lensY = Math.min(Math.max(mouseY - config.lensSize / 2, 0), maxY)
  lensPosition.value = {
    left: lensX,
    top: lensY
  }
  console.log(lensPosition.value)
  zoomedImageStyle.value = {
    top: lensY * -3.22 + 'px',
    left: lensX * -3.22 + 'px'
  }
}
const handleMouseMove = (event: MouseEvent) => {
  calculateZoom(event)
}
const typeBoxItemActionFun = (index: any, item: any) => {
  if(index !== -1){
    state.typeBoxItemAction = index
    state.positiveImg = item
    // state.positiveVideo = ''
    state.videoShow = false
  } else {
    state.videoShow = true
    state.typeBoxItemAction = -1
    state.positiveVideo = state.goodData.mainVideo
  }

}
const getGoodsDetailFun = (topId: any) => {
  getGoodsDetail({offerId: topId}).then((res: any) => {
    console.log(res)
    if (res.errCode === 0) {
      state.goodData = res.returnData
      state.positiveImg = res.returnData.firstImg
      state.certificateList = res.returnData.certificateList[0].certificatePhotoList
      if (state.goodData.maminVideo !== '') {
        state.videoShow = true
        state.positiveVideo = state.goodData.mainVideo
      }
      getIndexListFun(state.goodData.topCategoryId)
    }
  })
}
const getIndexListFun = (topId: any) => {
  getIndexList({
    topCategoryId: topId,
    page: 1,
    limit: 10,
  }).then((res: any) => {
    if (res.errCode === 0) {
      state.seriesList = res.returnData.list
    }
  })
}
const regressionImgFun = (img: any) => {
  state.positiveImg = img
  // state.positiveVideo = ''
  state.videoShow = false
}
const initiateOrderFun = (index: any) => {
  state.orderShow = true
}
const getGoodsSkuAttributeFun = (topId: any) => {
  getGoodsSkuAttribute({offerId: topId}).then(res => {
    console.log(res)
    if (res.errCode === 0) {
      state.typeGoodData = res.returnData
    }
  })
}
onMounted(() => {
  getGoodsDetailFun(route.query.top)
  getGoodsSkuAttributeFun(route.query.top)
})
onUnmounted(() => {
  if (debounceTimer) {
    window.clearTimeout(debounceTimer)
  }
})
</script>


<style lang="less" scoped>
:deep(.el-drawer__header){
  margin-bottom: 0 !important;
}
:deep(.el-tabs__item) {
  font-family: Segoe UI, Segoe UI;
  font-weight: bold;
  font-size: 16px;
  //color: #333333;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-bottom: 23px;
}

:deep(.is-active) {
  color: #0070E9;
}

:deep(.el-tabs__nav-wrap:after) {
  //display: none;
}

.multi-line-omit {
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  text-overflow: ellipsis; // 溢出用省略号显示
  overflow: hidden; // 超出的文本隐藏
  display: -webkit-box; // 作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 2; // 显示的行
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}

.main {
  display: flex;
  justify-content: center;
  height: 100%;
  background-color: #F6F6F6;

  .body {
    width: 1400px;

    .topGoodType {
      width: 1400px;

      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      margin: 16px 0;
      box-sizing: border-box;
      padding: 10px;
      display: flex;

      .imgBox {
        box-sizing: border-box;
        padding-top: 20px;
        width: 55%;
        display: flex;

        .typeBoxIndex {
          position: relative;

          .BlowUpBox {
            position: absolute;
            width: 644px;
            height: 644px;
            left: 660px;
            top: 0;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
            z-index: 99999999;
            img {
              position: absolute;

              width: 2073.68px;
              height: 2073.68px;
            }
          }

          .bigImgBox {
            width: 644px;
            height: 644px;
            border-radius: 8px 8px 8px 8px;
            background-color: #EEEEEE;
            overflow: hidden;
            position: relative;

            .magnifyingGlass {
              position: absolute;
              width: 200px;
              height: 200px;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 8px;
            }

            img {
              width: 100%;
            }

            video {
              width: 100%;
              height: 100%;
            }
          }

          .LinkBox {
            width: 644px;
            //height: 192px;
            box-sizing: border-box;
            padding: 16px;
            margin-top: 10px;

            .title {
              font-family: Segoe UI, Segoe UI;
              font-weight: bold;
              font-size: 16px;
              color: #333333;
              line-height: 16px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              margin-bottom: 18px;
            }
          }
        }

        .BtnBox {
          position: relative;
          display: flex;
          justify-content: center;
          height: 644px;
          flex: 1;

          .topBtn {
            position: absolute;
            top: 0;
            width: 74px;
            height: 40px;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }

          .bottomBtn {
            position: absolute;
            bottom: -40px;
            width: 74px;
            height: 40px;
            background: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }

          .typeBoxList::-webkit-scrollbar {
            display: none; /* WebKit */
          }

          .typeBoxList {
            height: 644px;
            overflow: auto;

            .scrollListBox {
              //height: 644px;
              display: flex;
              flex-direction: column;
              align-items: center;

              .positiveVideoClass {
                position: relative;
                border-radius: 8px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                .bofang{
                  position: absolute;
                  font-size: 36px;
                  color: white;
                }
                img {
                  width: 100%;
                }
              }

              .typeBoxItem {
                width: 74px;
                height: 74px;
                border-radius: 4px 4px 4px 4px;
                margin-bottom: 12px;
                //border: 2px solid #0070E9;
                cursor: pointer;
              }

              .typeBoxItem_action {
                width: 74px;
                height: 74px;
                border-radius: 4px 4px 4px 4px;
                margin-bottom: 12px;
                box-sizing: border-box;
                border: 2px solid #0070E9;
                cursor: pointer;
              }
            }
          }
        }
      }

      .typeBox {
        margin-left: 22px;
        width: 45%;
        box-sizing: border-box;
        padding: 20px 25px 10px 12px;
      }
    }

    .topGoodDetails {
      width: 1400px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      margin: 16px 0;
      box-sizing: border-box;
      padding: 20px;
      //display: flex;
    }
  }
}
</style>
